<template>
  <div class="vip-nav-comprehensive">
    <div class="left-panel">
      <!--      <vab-fold fold="contract-left-line" unfold="contract-right-line" />-->
      <el-menu
        active-text-color="var(--el-menu-color-text)"
        :default-active="activeMenu"
        menu-trigger="hover"
        background-color="var(--el-menu-background-color)"
        text-color="var(--el-menu-color-text)"
        mode="horizontal"
      >
        <VipMenu v-for="(item, index) in handleRoutes" :key="index + item['name']" :item="item" layout="horizontal" />
      </el-menu>
    </div>

    <div class="right-panel">
      <!--      <vab-right-tools />-->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoutesStore } from '/@/store/modules/routes'

defineOptions({
  name: 'VipNavComprehensive',
})

const route = useRoute()
const routesStore = useRoutesStore()
const { getRoutes: routes } = storeToRefs(routesStore)

const activeMenu = ref('')
watch(
  () => [route],
  () => {

    // 首页后面处理
    const length = route.path.split('/').length
    if (length === 2) {
      activeMenu.value = '/'
    } else {
      activeMenu.value = '/' + route.path.split('/')[1]
    }
  },
  {
    deep: true,
    immediate: true,
  },
)

const handleRoutes = computed(() => {
  return routes.value.map(route => ({
    ...route,
    // 删除 children 属性
    children: undefined,
  }))
})

</script>

<style lang="scss" scoped>
.vip-nav-comprehensive {
  //position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  justify-content: space-between;
  height: var(--el-nav-height);
  padding-right: var(--el-padding);
  //padding-left: var(--el-padding);
  overflow: hidden;
  user-select: none;
  background: var(--el-color-white);
  border-bottom: 1px solid var(--el-border-color);

  .el-menu--horizontal.el-menu {
    border: 0 !important;
  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: var(--el-color-primary) !important;
    background-color: var(--el-color-primary-light-9) !important;
  }

  .el-menu--horizontal .el-sub-menu__title:not(.is-disabled):focus,
  .el-menu--horizontal .el-sub-menu__title:not(.is-disabled):hover {
    border-radius: var(--el-border-radius-base) !important;
  }

  .el-menu--horizontal {
    .el-menu-item {
      &:hover {
        color: var(--el-color-primary) !important;
        background-color: var(--el-color-primary-light-9) !important;
      }
    }

    .el-menu-item.is-active,
    .el-sub-menu__title.is-active {
      color: var(--el-color-primary) !important;
      background-color: var(--el-color-primary-light-9) !important;
      border-bottom: 0 !important;
    }


    :deep() {
      .el-sub-menu__title {
        border-bottom: 0 !important;
      }
    }

  }

  :deep() {
    .el-sub-menu__title:hover {
      color: var(--el-color-primary) !important;
      background-color: var(--el-color-primary-light-9) !important;
    }
  }


  .left-panel {
    display: flex;
    align-items: center;
    justify-items: center;
    height: var(--el-nav-height);

    :deep() {
      .fold-unfold {
        margin-right: var(--el-margin);
      }


      .el-tabs {
        width: 100%;
        margin-left: 0;

        .el-tabs__header {
          margin: 0;

          > .el-tabs__nav-wrap {
            display: flex;
            align-items: center;

            .el-icon-arrow-left,
            .el-icon-arrow-right {
              font-weight: 600;
              color: var(--el-color-grey);
            }
          }
        }

        .el-tabs__item {
          > div {
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }
        }
      }

      .el-tabs__nav-wrap::after {
        display: none;
      }
    }
  }

  .right-panel {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    height: var(--el-nav-height);
    transition: var(--el-transition);

    :deep() {
      [class*='ri-'] {
        margin-left: var(--el-margin);
        color: var(--el-color-grey);
        cursor: pointer;
      }

      button {
        [class*='ri-'] {
          margin-left: 0;
          color: var(--el-color-white);
          cursor: pointer;
        }
      }
    }
  }

  @media (max-width: 450px) {
    .right-panel {
      :deep() {
        .el-badge,
        .ri-refresh-line {
          display: none;
        }
      }
    }
  }
}
</style>
